import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { Text, View, Image } from '@tarojs/components';
import './OrderItem.less';
import moment from 'dayjs';
import qIcon from '../img/q.png';
import sIcon from '../img/s.png';
import phoneIcon from '../img/phone.png';
import goodIcon from '@/assets/image/shop/good1.png';

const flowStatus = (status, orderType) => {
  // if (status == 0) {
  //   return '待支付';
  // } else if (status == 1) {
  //   return '待接单';
  // } else if (status == 2) {
  //   return '服务中';
  // } else if (status == 3) {
  //   return '已完成';
  // } else if (status == 4) {
  //   return '已取消';
  // }
  if (orderType === 1) {
    if (status == 0) {
      return '待接单';
    } else if (status == 1) {
      return '服务中';
    } else if (status == 2) {
      return '已完成';
    } else if (status == 3) {
      return '已取消';
    }
  } else {
    if (status == 0) {
      return '服务中';
    } else if (status == 1) {
      return '已完成';
    } else if (status == 2) {
      return '已取消';
    }
  }

};

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class OrderItem extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {};
  }

  //图片渲染
  renderImg(list) {
    let listView = [];
    let urls = [];
    if (list.length > 0) {
      list.map((item, index) => {
        if (item == '') {
          return;
        }
        urls.push(item);
        listView.push(
          <Image
            key={index}
            onClick={(e) => {
              e.stopPropagation();
              this.onImageClick(item, urls);
            }}
            src={item}
            mode="aspectFill"
            className="goodIcon"
          />,
        );
      });
    }
    return listView;
  }
  onImageClick = (item, urls) => {
    this.previewImage(item, urls);
  };
  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  render() {
    let {
      main,
      order,
      orderType, //1、我的发布的订单，2、我的接单的订单
      actions: { action },
    } = this.props;
    return (
      <View className="componentOrderItem">
        <View className="card-box">
          <View
            onClick={(e) => {
              e.stopPropagation();
              Taro.navigateTo({
                url: `/pages/package-D/orderDetail/index?orderType=${orderType}&id=${order.id}`,
              });
            }}
          >
            <View className="time-price-box">
              <Text className="time">
                {moment(order.deliveryDate).format('YYYY-MM-DD') == moment(new Date()).format('YYYY-MM-DD')
                  ? '今天'
                  : moment(order.deliveryDate).format('MM-DD')}
                ｜{moment(order.deliveryDate + ' ' + order.deliveryTimeBegin).format('HH:mm')}-{moment(moment(order.deliveryDate).format('YYYY-MM-DD') + ' ' + order.deliveryTimeEnd).format('HH:mm')}
                <Text> 送达</Text>
              </Text>
              <View className="time-status">{flowStatus(orderType === 1 ? order.escortTradeStatus : order.escortSnatchOrderStatus, orderType)}</View>
            </View>
            <View style={{ margin: '19px 0' }}>
              <View className="needle-box">
                <View style={{ alignItems: 'center' }}>
                  <Image className="q-icon" src={qIcon} mode="widthFix" />
                  <View className="dashed-border" />
                </View>
                <View style={{ marginLeft: 7 }}>
                  <View style={{ display: '-webkit-box' }} className="line-two">
                    <Text className="addr">
                      {order.communityName}｜{order.courierStationName}
                    </Text>
                  </View>
                  <View style={{ display: '-webkit-box' }} className="line-one">
                    <Text className="addr-info">{order.communityAddress}</Text>
                  </View>
                </View>
              </View>
              {/* <Text className="distance">4.3km</Text> */}
              <View className="needle-box">
                <View style={{ alignItems: 'center' }}>
                  <View className="dashed-border" />
                  <Image className="s-icon" src={sIcon} mode="widthFix" />
                </View>
                <View style={{ marginLeft: 7, marginTop: 50 }}>
                  <View style={{ display: '-webkit-box' }} className="line-two">
                    <Text className="addr">
                      {order.city}
                      {order.area}
                      {order?.street}
                      {order.deliveryAddress}
                    </Text>
                  </View>
                </View>
              </View>
            </View>

            {orderType === 2 && (
              <View className="name-box">
                <Text className="name">{order.consigneeName}</Text>
                <Text className="phone">{order.consigneeNumber}</Text>
                <Image
                  onClick={(e) => {
                    e.stopPropagation()
                    Taro.makePhoneCall({ phoneNumber: order.consigneeNumber })
                  }}
                  className="phoneIcon"
                  src={phoneIcon}
                  mode="widthFix"
                />
              </View>
            )}

            <View className="details">
              <Text className="details-text">{order.requirement}</Text>
            </View>

            {order.img && <View className="img-box">{this.renderImg(order.img.split(';'))}</View>}

            {orderType === 1 && (
              <View className="time-price-box">
                {order.harvestCode ? (
                  <View className="code">收货码： {order.harvestCode}</View>
                ) : (
                  <View className="code"></View>
                )}
                <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                  <Text className="label">配送费</Text>
                  {/* <Text style={{fontSize: 14, color: '#FE3831', fontWeight: 'bold'}}>¥</Text>
                  <Text className="price">{order.price}</Text> */}
                  <Text className="price" style={{ marginLeft: '10rpx' }}>{order.points}</Text>
                  <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>积分</Text>
                </View>
              </View>
            )}

            {orderType === 2 && (
              <>
                <View className="time-price-box">
                  <View className="code"></View>
                  <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                    <Text className="label">配送费 </Text>
                    {/* <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>¥</Text>
                    <Text className="price">{order.price}</Text> */}
                    <Text className="price" style={{ marginLeft: '10rpx' }}>{order.points}</Text>
                    <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>积分</Text>
                  </View>
                </View>
              </>
            )}

            <View className="btn-box">
              {orderType == 1 ? (
                <>
                  {/* {(order.escortTradeStatus == 0 || order.escortTradeStatus == 1) && ( */}
                  {order.escortTradeStatus == 0 && (
                    <View
                      className="btn"
                      onClick={(e) => {
                        e.stopPropagation();
                        action.commonChange('main.escortTradeId', order.id);
                        action.commonChange('main.cancelModel', true);
                      }}
                    >
                      取消订单
                    </View>
                  )}
                  {/* {order.escortTradeStatus == 0 && (
                    <View
                      className="btn-a"
                      onClick={(e) => {
                        e.stopPropagation();
                        action.commonChange('main.price', order.price);
                        action.statistics();
                        action.commonChange('main.payModel', true);
                      }}
                    >
                      去支付
                    </View>
                  )} */}
                  {/* {order.escortTradeStatus == 3 && ( */}
                  {(order.escortTradeStatus == 2 || order.escortTradeStatus == 3) && (
                    <View
                      className="btn"
                      onClick={(e) => {
                        e.stopPropagation();
                        Taro.showModal({
                          content: '确认删除此订单?',
                          success: function (res) {
                            if (res.confirm) {
                              action.delEscorttradeDetail(order.id);
                            } else if (res.cancel) {
                              console.log('用户点击取消');
                            }
                          },
                          confirmColor: '#218CFF'
                        });
                      }}
                    >
                      删除订单
                    </View>
                  )}
                  {/* {(order.escortTradeStatus == 2 || order.escortTradeStatus == 3) && ( */}
                  {(order.escortTradeStatus == 1 || order.escortTradeStatus == 2) && (
                    <View
                      className="btn"
                      onClick={(e) => {
                        e.stopPropagation();
                        Taro.makePhoneCall({ phoneNumber: order.serviceCustomerAccount });
                      }}
                    >
                      联系TA
                    </View>
                  )}
                  {/* {order.escortTradeStatus == 3 && ( */}
                  {(order.escortTradeStatus == 2 || order.escortTradeStatus == 3) && (
                    <View
                      className="btn-a"
                      onClick={(e) => {
                        e.stopPropagation()
                        Taro.navigateTo({
                          url: `/pages/package-D/addPickupCourier/index?id=${order?.id}&deliveryAddressId=${order?.deliveryAddressId}`,
                        });
                      }}
                    >
                      再来一单
                    </View>
                  )}
                </>
              ) : (
                <>
                  {order.escortSnatchOrderStatus == 0 ? ( //服务中
                    <>
                      <View
                        className="btn-a"
                        onClick={(e) => {
                          e.stopPropagation();
                          action.commonChange('main.escortTradeId', order.escortTradeId);
                          action.commonChange('main.harvestCode', '')
                          action.commonChange('main.confirmModel', true);
                        }}
                      >
                        确认完成
                      </View>
                    </> //已完成
                  ) : (
                    <>
                      <View
                        className="btn"
                        onClick={(e) => {
                          e.stopPropagation();
                          Taro.showModal({
                            content: '确认删除此订单?',
                            success: function (res) {
                              if (res.confirm) {
                                action.delEscortsnatchorderDetail(order.id);
                              } else if (res.cancel) {
                                console.log('用户点击取消');
                              }
                            },
                            confirmColor: '#218CFF'
                          });
                        }}
                      >
                        删除订单
                      </View>
                      <View
                        className="btn-a"
                        onClick={(e) => {
                          e.stopPropagation();
                          Taro.navigateTo({
                            url: '/pages/package-D/pickupExpressDelivery/index',
                          });
                        }}
                      >
                        去接单
                      </View>
                    </>
                  )}
                </>
              )}
            </View>
          </View>
        </View>
      </View>
    );
  }
}
